<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .video_title{
            display: flex;
            align-items: center;
            border-radius: 5px;
            height: 700px;
            font-size: 30px;
            color: white;
            line-height: 24px;
            margin-bottom: 6px;
            white-space: nowrap;
            text-overflow: ellipsis;

        }
        .video{
            border-radius: 5px;
            height: 700px;
            overflow-x:hidden;
            overflow-y: hidden;
        }
        .select_list{
            background-color: #f1f2f3;
            margin-top: 10px;
            height: 500px;
            border-radius: 5px;
            font-size: 15px;
            font-style: normal;
            overflow-x:hidden;
        }
        .select{
            font-size: 20px;
            display: flex;
            align-items: center;
            margin-top: 90px;
            border-radius: 5px;
            background-color: #f1f2f3;
            overflow-x:hidden;

        }
        .select_list li {
            display: flex;
            align-items: center;
            cursor: pointer;
            height: 40px;
            width: 290px;
            overflow-x:hidden;

        }

        .select_list li:hover{
            background-color: white;
            overflow-x:hidden;
        }
        .select_list .el-divider {
            margin-top: -3px;
            margin-bottom: 5px;
        }

        .selected {
            background-color: white;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--头,引入my-header.js-->
        <el-header>
        <my-header></my-header>
        </el-header>
        <el-main>
    <div style="width: 1400px ; margin: 0 auto ">
        <el-row gutter="20" style="margin-top: 40px;background-color: #333333">
            <el-col span="18">
                <div class="left">
                    <el-container>
                        <el-header class="video_title">
                            <span style="overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;height: 60px;cursor: pointer;padding-top: 35px">{{videotitle}}</span>
                        </el-header>
                        <el-main class="video">
                            <div class="bigvideo">
                                <video style="height: 100%;width: 100%;margin-top: 10px" :src="videourl" controls ></video>
                            </div>
                        </el-main>
                    </el-container>

                </div>
            </el-col>
            <el-col span="6">
                <div class="left">
                    <el-container >
                        <el-header class="select">
                            <span>{{selectedItemInfo}}</span>
                        </el-header>
                        <el-main class="select_list">
                            <!--:class="{ selected: isSelected(index) }" 动态类，点击li标签改变样式-->
                            <li style="list-style: none;overflow: hidden;
                                      display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical" v-for="(r, index) in videoArr" :key="index" @click="changeVideo(r.url,index)" :class="{ selected: isSelected(index) }">
                                <!--选中时显示图片-->
                                <span v-if="isSelected(index)">
                                     <img src="img/playing.gif" style="width: 20px;height: 20px">
                                </span>

                                    P{{index+1}}  {{r.title}}
                            </li>
                        </el-main>
                    </el-container>

                </div></el-col>
        </el-row>
    </div>
        </el-main>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/my-header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                videoArr:[],
                videourl: '',
                selectedIndex: 0 ,// 当前所选项的初始值为 0
                videotitle:''
            }
        },
        methods: {
            changeVideo: function (url,index) {
                this.videourl = url;
                this.selectedIndex = index; // 记录当前项的索引
            }
        },
        created:function () {
            let bvid = new URLSearchParams(location.search).get("bvid");
            axios.get("/v1/videos/"+bvid).then(function (response) {
                v.videoArr = response.data.data;
                if (v.videoArr.length > 0) {
                    v.videourl = v.videoArr[0].url; // 将 videourl 设置为第一个视频的 url,页面加载完成自动播放第一个li标签的url
                }
            }),
                axios.get("/v1/courses/getcoursename/"+bvid).then(function (response) {
                    v.videotitle = response.data.data;
                })
        },
        computed: {
            selectedItemInfo() {
                const itemNum = this.videoArr.length;
                const currentIndex = this.selectedIndex + 1;
                return `选集 (${currentIndex}/${itemNum})`;
            },
            selectedItemId () {
                return this.selectedIndex;
            },
            isSelected () {
                return (index) => this.selectedItemId === index;
            }
        }

    })
</script>
</html>